import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:hovue/common/values/images.dart';

@RoutePage()
class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  final PageController _pageController = PageController();
  
  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  void _changePage(int index) {
    setState(() {
      _currentIndex = index;
    });
    _pageController.animateToPage(
      index, 
      duration: const Duration(milliseconds: 300), 
      curve: Curves.easeInOut
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFDF6F0),
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 顶部标题和按钮
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 16.h),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    'Hovue',
                    style: GoogleFonts.fraunces(
                      fontSize: 30.sp,
                      fontStyle: FontStyle.italic,
                      color: const Color(0xFF191431),
                      fontWeight: FontWeight.w800,
                    ),
                  ),
                  Container(
                    width: 32.w,
                    height: 32.w,
                    decoration: BoxDecoration(
                      color: Colors.black,
                      borderRadius: BorderRadius.circular(20.r),
                    ),
                    child: Icon(
                      Icons.add,
                      color: Colors.white,
                      size: 30.sp,
                    ),
                  ),
                ],
              ),
            ),
            
            // 分类图标
            SizedBox(height: 10.h),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                _buildCategoryItem(Images.sofa, 'Sofa'),
                _buildCategoryItem(Images.bed, 'Bed'),
                _buildCategoryItem(Images.chair, 'Chair'),
                _buildCategoryItem(Images.table, 'Table'),
              ],
            ),
            
            // 自定义选项卡
            SizedBox(height: 30.h),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 20.w),
              child: Row(
                children: [
                  _buildTab(0, 'Recommend'),
                  SizedBox(width: 20.w),
                  _buildTab(1, 'Idea sharing'),
                ],
              ),
            ),
            
            // 选项卡内容
            Expanded(
              child: PageView(
                controller: _pageController,
                onPageChanged: (index) {
                  setState(() {
                    _currentIndex = index;
                  });
                },
                children: [
                  // 推荐内容
                  Center(
                    child: Text(
                      'Recommend Content',
                      style: TextStyle(fontSize: 16.sp),
                    ),
                  ),
                  
                  // 创意分享内容
                  Center(
                    child: Text(
                      'Idea Sharing Content',
                      style: TextStyle(fontSize: 16.sp),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
  
  Widget _buildTab(int index, String title) {
    final bool isSelected = _currentIndex == index;
    
    return GestureDetector(
      onTap: () => _changePage(index),
      child: Text(
        title,
        style: GoogleFonts.inter(
          fontSize: 20.sp,
          fontStyle: FontStyle.italic,
          fontWeight: isSelected ? FontWeight.w900 : FontWeight.w900,
          color: isSelected ? Colors.black : Colors.grey,
        ),
      ),
    );
  }
  
  Widget _buildCategoryItem(String icon, String label) {
    return Container(
      width: 80.w,
      height: 80.w,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(40.r),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset(
            icon,
            width: 42.w,
            height: 42.w,
          ),
          SizedBox(height: 4.h),
          Text(
            label,
            style: TextStyle(
              fontSize: 12.sp,
              fontWeight: FontWeight.w500,
              color: Colors.black,
            ),
          ),
        ],
      ),
    );
  }
} 